<template>
  <div id="energy-chart">
    <h2>
      各类型车辆能耗比较
    </h2>
    <div class="box">
      <span class="icon top-left-icon"></span>
      <span class="icon top-right-icon"></span>
      <span class="icon bottom-left-icon"></span>
      <span class="icon bottom-right-icon"></span>

      <div id="energy-bar"></div>

      <ul>
        <li v-for="(item,index) in energyDataList" :key="item.id">
          <div class="energyBarColor" :style="{background:colors[index]}"></div>
          <span class="name">{{item.name}}</span>
          <span class="energyCount">{{item.energyCount}}(L)</span>
          <span class="percent">{{item.percent}}%</span>
        </li>
      </ul>

    </div>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex';

  export default {
    name: 'EnergyChart',
    data () {
      return {
        energyBar:null,
        colors:['#d5a635','#4db22f','#53c5a8','#108ec3','#e15050','#1c75e2']
      }
    },

    computed: {
      ...mapGetters({
        homeState: "home_state",
        energyDataList: "homeChart/energyArr",
        formatHistoryTime: "homeChart/selectedTime"
      })
    },

    mounted(){
      this.getData();
      this.barInit();
    },
    methods:{
      barInit(){
        this.energyBar = echarts.init(document.getElementById('energy-bar'));
        let option = {

          angleAxis: {
            axisTick:{
              show: false
            },
            axisLabel:{
              show: false
            },
            splitLine:{
              show:false
            },
            max:48,
          },
          radiusAxis: {
            type: 'category',

          },
          polar: {
          },

          series: [{
            name:'',
            type: 'bar',
            radius: '100%',
            data: [
              {value:0,itemStyle:{normal:{color:this.colors[5]}}},
              {value:2,itemStyle:{normal:{color:this.colors[5]}}},
              {value:4,itemStyle:{normal:{color:this.colors[4]}}},
              {value:6,itemStyle:{normal:{color:this.colors[3]}}},
              {value:10,itemStyle:{normal:{color:this.colors[2]}}},
              {value:12,itemStyle:{normal:{color:this.colors[1]}}},
              {value:14,itemStyle:{normal:{color:this.colors[0]}}}
              ],
            coordinateSystem: 'polar',
            stack: 'a'
          },{
            type: 'bar',
            data: [
              {value:48,itemStyle:{normal:{color:'#111825'}}},
              {value:46,itemStyle:{normal:{color:'#18283d'}}},
              {value:44,itemStyle:{normal:{color:'#18283d'}}},
              {value:42,itemStyle:{normal:{color:'#18283d'}}},
              {value:38,itemStyle:{normal:{color:'#18283d'}}},
              {value:36,itemStyle:{normal:{color:'#18283d'}}},
              {value:34,itemStyle:{normal:{color:'#18283d'}}}
            ],
            coordinateSystem: 'polar',
            stack: 'a'
          }]
        };
        this.energyBar.setOption(option);
      },

      getData: function() {
        this.$store.dispatch("homeChart/requsetEnergyArr", this.homeState !== "history_hotMap" ? 0 : this.formatHistoryTime);
      }
    },

    watch: {
      homeState: function() {
        this.getData();
      },
      formatHistoryTime: function() {
        this.getData();
      },
      energyDataList: function() {
        this.barInit();
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../static/common/common.scss";
  #energy-chart{
    width: 100%;
    height: 270px;
    box-sizing: border-box;
    padding: 10px;
    h2{
      @include linearTitle;
    }
    .box{
      position: relative;
      height: calc(100% - 34px);
      @include borderBlur;
      .icon{
        position: absolute;
        z-index: 10;
        width: 14px;
        height: 14px;
        &.top-left-icon{
          top: -2px;
          left: -2px;
          background: url("../../../static/images/index/top-left.png") no-repeat left top;
        }
        &.top-right-icon{
          top: -2px;
          right: -2px;
          background: url("../../../static/images/index/top-right.png") no-repeat right top;
        }
        &.bottom-left-icon{
          bottom: -2px;
          left: -2px;
          background: url("../../../static/images/index/left-bottom.png") no-repeat left bottom;
        }
        &.bottom-right-icon{
          bottom: -2px;
          right: -2px;
          background: url("../../../static/images/index/right-bottom.png") no-repeat right bottom;
        }
      }
      #energy-bar{
        display: inline-block;
        vertical-align: middle;
        width: 42%;
        height: 100%;
        /*margin: 14px 22px;*/
        margin: 0;
        padding: 0;
        transform:rotate(180deg);

      }

      ul{
        display: inline-block;
        vertical-align: middle;
        width: 56%;
        height: auto;
        list-style-type: none;
        padding: 0;
        /*margin-top: 24px;*/
        margin: 0;
        text-align: left;
        /*margin: 24px 32px 24px 0px;*/
        li{
          width: 100%;
          padding: 0;
          margin: 13px 0;
          font-size: $list-font;

          span{
            &.name{
              display: inline-block;
              width: 75px;
              margin-left: 6px;

            }
            &.energyCount{
              /*margin-left: 32px;*/
              display: inline-block;
              width: 70px;


            }
            &.percent{
              display: inline-block;
              width: 30px;
            }
          }
          .energyBarColor{
            display: inline-block;
            vertical-align: middle;
            width: 32px;
            height: 14px;
            border: 2px solid #2e4e5d;
            box-sizing: border-box;
          }
        }
      }
    }
  }
</style>
